<template>
  <div id="box">
      <myHeader id="header"/>
    <div id="content">
      <myBanner1 />
      <myNav />
      <myNewPopularity />
      <myBanner2 />
      <myNewReleases />
    </div>
      <myFooter id="bottom"/>
  </div>
</template>

<script>
import myHeader from "./Headermendian.vue";
import myFooter from "./Myfooter.vue";
import myBanner1 from "./Banner1.vue";
import myNav from "./Navigation";
import myNewPopularity from "./newPopularity.vue";
import myBanner2 from "./Banner2.vue";
import myNewReleases from "./newReleases.vue";
export default {
  name: "Choice",
  components: {
    // HelloWorld
    myHeader,
    myFooter,
    myBanner1,
    myNav,
    myNewPopularity,
    myBanner2,
    myNewReleases,
  },
};
</script>

<style scoped>
#box {
  width: 100%;
  height: 100%;
}
#content {
  padding-top: 0.4rem;
  padding-bottom: 0.55rem;
}
#header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 999;
}
#bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
}
</style>